<template>
  <el-dialog custom-class="email-dialog" :before-close="canClose" :fullscreen="true" :visible.sync="showEmail" :close-on-click-modal="false">
    <div slot="title" class="title">{{isView ? '查看邮件' : type === 'answer' ? '回复邮件' : !emailForm.id ? '新邮件' : '编辑邮件'}}</div>
    <div class="email-content">
      <div class="row-1">
        <div class="left-label">
          <span class="left-name">发件人</span>
          <span class="iconclass" @click="openRecipient(true)" v-if="!isView"><i class="el-icon-circle-plus-outline"></i></span>
        </div>
        <div class="people-wrapper clearfix" style="cursor: text;">
          <el-tooltip v-for="(item, idx) in senderArr" :key="item.id" class="item" effect="light" :content="item.account" placement="bottom">
            <div class="select-people-item">
              {{item.nickname}} <i class="el-icon-close" @click.stop="removeItem('senderArr', idx)" v-if="!isView"></i>
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="row-1">
        <div class="left-label">
          <span class="left-name">收件人</span>
          <span class="iconclass" @click="openRecipient(false)" v-if="!hasReceiverEmail && !isView"><i class="el-icon-circle-plus-outline"></i></span>
        </div>
        <div class="people-wrapper clearfix" style="cursor: text;"> 
          <el-tooltip v-for="(item, idx) in receiveArr" :key="item.id" class="item" effect="light" :content="item.account" placement="bottom">
            <div class="select-people-item">
              {{item.nickname}} <i class="el-icon-close" @click="removeItem('receiveArr', idx)" v-if="!hasReceiverEmail && !isView"></i>
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="row-1">
        <div class="left-label">
          <span class="left-name">主&nbsp;&nbsp;&nbsp;题</span>
        </div>
        <input type="text" v-model="emailForm.subject" v-if="!isView">
        <div v-if="isView" style="line-height: 35px;">{{emailForm.subject}}</div>
      </div>
      <div class="row-1">
        <div class="left-label">
          <span class="left-name">附&nbsp;&nbsp;&nbsp;件</span>
          <span class="iconclass" @click="$refs.uploadInput.click()" v-if="!isView"><i class="el-icon-circle-plus-outline"></i></span>
          <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event)" multiple>
        </div>
        <div class="files-wrapper clearfix">
          <div class="file" v-for="(file, idx) in emailForm.filesArr" :key="file.id" @click="downloadFile(file.url, getFileName(file.url))">
            <div class="file-type"><img :src="getPic(file.url)" alt=""></div>
            <div class="file-info">
              <p>{{getFileName(file.url)}}</p>
              <p>上传完成</p>
              <div class="file-action">
                <el-tooltip effect="light" content="删除" placement="bottom">
                  <i class="el-icon-close" @click="delFile(idx)" v-if="!isView"></i>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div ref="toolbar" class="editor-tool-bar" v-if="!isView"></div>
      <div class="email-editor" ref="editor" v-if="!isView"></div>
      <div v-html="emailForm.content" v-if="isView" style="padding: 20px;"></div>
      <div class="footer-bar" v-if="!isView">
        <div @click="sendEmail" class="send-btn">发送</div>
        <div><el-checkbox v-model="ifOnTime">定时发送</el-checkbox></div>
        <el-date-picker
          v-if="ifOnTime"
          v-model="sendTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format="timestamp"
          default-time="23:59:59"
          style="width: 220px;">
        </el-date-picker>
        <div @click="sendCGX" class="sendcgx-btn">存草稿</div>
      </div>
    </div>
    <el-dialog width="600px" custom-class="address-dialog" :visible.sync="showRecipient" append-to-body :show-close="false">
      <div slot="title" class="address-dialog-header">
        通讯录<i class="el-icon-close" @click="showRecipient = false;"></i>
      </div>
      <div class="address-dialog-body">
        <div class="select-left">
          <div class="select-left-search">
            <i class="el-icon-search"></i>
            <input type="text" v-model="searchAccount" @input="searchItem(true)">
          </div>
          <div class="select-left-search-result">
            <el-tooltip v-for="item in tableData" :key="item.id" class="item" effect="light" :content="item.account" placement="bottom">
              <div class="select-left-search-result-item" @click="selectPeople(item)">{{item.nickname}}</div>
            </el-tooltip>
          </div>
          <div class="select-left-search-page">
            <i class="el-icon-d-arrow-left" @click="currentChangeHandle(1)"></i>
            <i class="el-icon-arrow-left" @click="currentChangeHandle(page -1)"></i>
            <span style="color: red;">{{page}}</span>/{{totalPage}}
            <i class="el-icon-arrow-right" @click="currentChangeHandle(page + 1)"></i>
            <i class="el-icon-d-arrow-right" @click="currentChangeHandle(totalPage)"></i>
          </div>
        </div>
        <div class="select-middle">
          <el-tooltip class="item" effect="light" content="移除本页" placement="bottom">
            <i class="el-icon-d-arrow-left" v-if="!showSection" @click="removeAllUser" style="cursor: pointer;"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="添加本页" placement="bottom">
            <i class="el-icon-d-arrow-right" v-if="!showSection" @click="addAllUser" style="cursor: pointer;"></i>
          </el-tooltip>
          <i class="el-icon-arrow-right" v-if="showSection"></i>
        </div>
        <div class="select-right">
          <div class="select-right-section">
            <div class="select-right-section-title" @click="changeSection">发件人({{senderArrCache.length}})</div>
            <div class="select-right-section-content" :style="{'height': showSection? '352px': '0'}">
              <div class="select-right-section-content-item" v-for="(item, idx) in senderArrCache" :key="item.id">
                {{item.nickname}}
                <i class="el-icon-close" @click="removeItem('senderArrCache', idx)"></i>
              </div>
            </div>
          </div>
          <div class="select-right-section" v-if="!hasReceiverEmail">
            <div class="select-right-section-title" @click="changeSection">收件人({{receiveArrCache.length}})</div>
            <div class="select-right-section-content" :style="{'height': !showSection? '352px': '0'}">
              <div class="select-right-section-content-item" v-for="(item, idx) in receiveArrCache" :key="item.id">
                {{item.nickname}}
                <i class="el-icon-close" @click="removeItem('receiveArrCache', idx)"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="address-dialog-footer">
        <div @click="saveCache">确定</div>
        <div @click="showRecipient = false;">取消</div>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import dingMixin from "@/mixins/ding";
import sinaEmotions from '@/assets/emotion/sina'
import formUtil from "@/utils/formUtil";
import {Loading, Message} from 'element-ui'

export default {
  data() {
    return {
      showSection: true,
      showEmail: false,
      showRecipient: false,
      emailForm: {
        subject: '',
        content: '',
        fileIds: '',
        filesArr: [],
      },
      page: 1,
      tableData: [],
      totalPage: 1,
      pageSize: 100,
      searchAccount: '',
      senderArr: [],
      senderArrCache: [],
      receiveArr: [],
      receiveArrCache: [],
      ifOnTime: false,  //是否定时发送
      sendTime: '',
      hasReceiverEmail: false,
      type: '',
      isInit: false
    }
  },
  mixins: [dingMixin],
  computed: {
    isView() {
      return this.type === 'view'
    }
  },
  methods:{
    async openEmail(emailDetail, sendInfo, type) {
      this.showEmail = true;
      this.ifOnTime = false;
      this.type = type
      if(this.type === 'view') {
        this.senderArr = [{nickname: sendInfo.sender, account: sendInfo.sender}]
        this.receiveArrCache = [{nickname: sendInfo.sender, account: sendInfo.sender}]
        this.receiveArr = [{nickname: sendInfo.messageTo, account: sendInfo.messageTo}]
        this.receiveArrCache = [{nickname: sendInfo.messageTo, account: sendInfo.messageTo}]
        this.emailForm = JSON.parse(JSON.stringify(emailDetail));
        this.$set(this.emailForm, 'filesArr', [])
        if( this.emailForm.fileIds !== '') {
          let idsArr = this.emailForm.fileIds.split(',')
          idsArr.forEach( async (id) => {
            let {data: res} = await this.$http.post('bms/tool/image?id='+id)
            this.emailForm.filesArr.push(res.data)
          })
        }
      } else if(this.type === 'answer') {
        this.hasReceiverEmail = true
        this.receiveArr = [{nickname: sendInfo, account: sendInfo}]
        this.receiveArrCache = [{nickname: sendInfo, account: sendInfo}]
      }else {
        this.hasReceiverEmail = false
        this.receiveArr = []
        this.receiveArrCache = []
      }
      if(!this.isInit) {
        this.$nextTick(async () => {
          let E = window.wangEditor;
          if(this.$refs.editor) {
            var editor = new E(this.$refs.toolbar, this.$refs.editor)
            editor.customConfig.uploadImgServer = this.$http.adornUrl('/fileUpload');
            editor.customConfig.uploadImgHeaders = {'token': this.$cookie.get('token')}
            editor.customConfig.uploadFileName = 'file'
            editor.customConfig.pasteTextHandle = function (content) {
              let handleData = content;
              //清除无用标签
              handleData = handleData.replace(/<(meta|script|link|html|head|)[^>]*>/, '');
              handleData = handleData.replace(/<\/(meta|script|link|html|head)[^>]*>/, '');
              handleData = handleData.replace(/<head>[\s\S]*<body lang=ZH-CN>/, '');
              handleData = handleData.replace(/style\s*?=\s*?(['"])[\s\S]*?\1/g, '');
              handleData = handleData.replace(/\sclass\s?=\s?\w*/g, '');
              handleData = handleData.replace(/<span\s*?lang=EN-US\s*?><o:p><\/o\:p><\/span>/g, '');
              handleData = handleData.replace(/lang=EN-US/g, '');
              handleData = handleData.replace(/\n/g, '');
              return handleData
            }
            editor.customConfig.menus = ['head','bold','fontSize','fontName','table', 'italic','underline','strikeThrough','foreColor','backColor','link','justify','quote','emoticon','image','video','code','undo','redo']
            editor.customConfig.uploadImgHooks = {
              customInsert: function (insertImg, result, editor) {
                var url = result.url + '?x-oss-process=style/forbid'
                insertImg(url)
              }
            }
            this.isInit = true;
            editor.customConfig.emotions = [{title:'默认',type: 'image',content: sinaEmotions}];
            editor.create();
            this.editor = editor;
            formUtil.resetData(this.emailForm);
            if(emailDetail) {
              this.emailForm = JSON.parse(JSON.stringify(emailDetail));
              this.$set(this.emailForm, 'filesArr', [])
              if( this.emailForm.fileIds !== '') {
                let idsArr = this.emailForm.fileIds.split(',')
                idsArr.forEach( async (id) => {
                  let {data: res} = await this.$http.post('bms/tool/image?id='+id)
                  this.emailForm.filesArr.push(res.data)
                })
              }
              this.editor.txt.html(this.emailForm.content);
            } else {
              this.editor.txt.html('');
            }
          }
        })
      } else {
        formUtil.resetData(this.emailForm);
        if(emailDetail) {
          this.emailForm = JSON.parse(JSON.stringify(emailDetail));
          this.$set(this.emailForm, 'filesArr', [])
          if( this.emailForm.fileIds !== '') {
            let idsArr = this.emailForm.fileIds.split(',')
            idsArr.forEach( async (id) => {
              let {data: res} = await this.$http.post('bms/tool/image?id='+id)
              this.emailForm.filesArr.push(res.data)
            })
          }
          this.editor.txt.html(this.emailForm.content);
        } else {
          this.editor.txt.html('');
        }
      }
    },
    getFileName(url) {
      let arr = url.split('/')
      return arr[arr.length - 1]
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    async searchItem(init) {
      if(init) this.page = 1;
      if(this.showSection) {
        let {data: res} = await this.$http.post('bms/mail/sender/list?pageNum='+this.page+'&pageSize='+this.pageSize,{ account: this.searchAccount })
        if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
        this.tableData = res.data.list
        if(init) this.totalPage = Number(res.data.pages)
      } else {
        let {data: res} = await this.$http.post('bms/user/list?pageNum='+this.page+'&pageSize='+this.pageSize+'&start='+(new Date().getTime() - 3*365*24*60*60*1000)+'&end='+(new Date().getTime())+'&timezoneOffset=28800', {
          orderBy: {
            col: 'updated_at',
            type: 'desc'
          },
          email: this.searchAccount
        })
        if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
        res.data.list.forEach(item => {
          item.account = item.email
          item.nickname = item.email
        })
        this.tableData = res.data.list
        if(init) this.totalPage = Number(res.data.pages)
      }
    },
    delFile(idx){
      this.emailForm.filesArr.splice(idx, 1)
    },
    async uploadFile(e) {
      var files = e.target.files;
      if(this.emailForm.filesArr.length + files.length > 3) return this.$message.error('最多只能上传3个文件')
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.$message.error('上传单个文件大小不能超过20MB!请压缩文件')
        let loadingControl = Loading.service({fullscreen: true,background: 'rgba(0, 0, 0, 0.7)',text: '加载中...'});
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        $this.$http.post('bms/tool/upload', formData).then(({data: res}) => {
          $this.emailForm.filesArr.push(res.data)
        })
        loadingControl.close();
      })
      e.target.value = ''
    },
    async sendEmail() {
      if(this.senderArr.length !== 1) return this.$message.error('请选择发件人')
      if(this.receiveArr.length === 0 && !this.hasReceiverEmail) return this.$message.error('请选择收件人')
      if(this.ifOnTime && !this.sendTime) return this.$message.error('请选择发送时间')
      if(this.ifOnTime && this.sendTime < new Date().getTime() ) return this.$message.error('定时发送时间不能比当前时间早')
      let loadingControl = Loading.service({fullscreen: true,background: 'rgba(0, 0, 0, 0.7)',text: '加载中...'});
      let {data: res2} = await this.$http.post('bms/mail/send', {
        sender: this.senderArr.map((item) => item.account).join(''),
        receivers: this.receiveArr.map((item) => item.account),
        sendDate: this.ifOnTime ? this.sendTime : undefined,
        timezoneOffset: 28800,
        subject: this.emailForm.subject,
        content: this.editor.txt.html(),
        fileIds: this.emailForm.filesArr.map(item => item.id).join(',')
      })
      loadingControl.close();
      if (res2.resultCode !== "000") return this.$message.error(res2.resultMessage);
      formUtil.submitSuccess('成功');
      if(res2.data && res2.data.failure && res2.data.failure.length > 0) {
        res2.data.failure.forEach(email => {
          this.$message.error('邮箱号为'+email+'的邮件发送失败');
        })
      }
      this.showEmail = false;
    },
    async sendCGX() {
      this.emailForm.content = this.editor.txt.html();
      this.emailForm.fileIds = this.emailForm.filesArr.map(item => item.id).join(',')
      let {data: res} = await this.$http.post(!this.emailForm.id ? 'bms/mail/message/add' : 'bms/mail/message/update', this.emailForm)
      if (res.resultCode !== "000") return this.$message.error(res.resultMessage);
      formUtil.submitSuccess('保存成功');
      let loadingControl = Loading.service({fullscreen: true,background: 'rgba(0, 0, 0, 0.7)',text: '加载中...'});
      this.showEmail = false;
      setTimeout(() => {
        this.$emit('refresh')
        loadingControl.close();
      }, 2500);
    },
    canClose(done) {
      if(!this.isView) {
        formUtil.submitConfirm('是否在关闭前保存到草稿箱', async ()=> {
          this.sendCGX()
        }, '提示', () =>{
          done()
        })
      } else {
        done()
      }
    },
    async openRecipient(type) {
      this.showSection = type;
      this.searchItem(true)
      this.showRecipient = true;
    },
    changeSection() {
      this.showSection = !this.showSection;
      this.searchItem(true)
    },
    currentChangeHandle(page) {
      if(page > this.totalPage || page < 1) return; 
      this.page = page;
      this.searchItem();
    },
    saveCache() {
      this.senderArr = formUtil.deepCopy(this.senderArrCache);
      this.receiveArr = formUtil.deepCopy(this.receiveArrCache);
      this.showRecipient = false;
    },
    addAllUser() {
      let accounts = this.receiveArrCache.map(item => { return item.account })
      let notExitAccounts = this.tableData.filter(item => {return !accounts.includes(item.account)})
      if(notExitAccounts.length + this.receiveArrCache.length > this.pageSize) return this.$message.error('最多一次性添加'+this.pageSize+'条记录')
      if(notExitAccounts.length > 0) this.receiveArrCache.push(...notExitAccounts)
    },
    removeAllUser() {
      let accounts = this.tableData.map(item => { return item.account })
      this.receiveArrCache = this.receiveArrCache.filter(item => {return !accounts.includes(item.account)})
    },
    selectPeople(item) {
      if(this.showSection) {
        this.senderArrCache = [item]
      }else {
        if(this.receiveArrCache.length >= this.pageSize) return this.$message.error('最多一次性添加'+this.pageSize+'条记录')
        let isExit = this.receiveArrCache.filter((member) => member.account === item.account);
        if(isExit.length === 0) this.receiveArrCache.push(item);
      }
    },
    removeItem(target, idx) {
      this[target].splice(idx, 1);
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) return this.dingPreviewPic(url);
      if(!url) return;
      var x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = 'blob';
      x.onload=function(e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = fileName;
        a.click()
      }
      x.send();
    },
  }
}
</script>

<style lang="scss">
  .address-dialog{
    padding: 12px;
    .el-dialog__header{
     padding: 0;
    }
    .el-dialog__body{
      padding: 0;
    }
    .address-dialog-header{
      line-height: 40px;
      background-color: #efefef;
      color: #252629;
      padding: 0 40px 0 12px;
      position: relative;
      i{
        position: absolute;
        font-size: 18px;
        top: 10px;
        right: 10px;
        cursor: pointer;
        &:hover{
          background-color: #ccc;
          color: #444547;
        }
      }
    }
    .address-dialog-body{
      display: flex;
      margin-top: 12px;
      height: 400px;
      .select-left{
        border: 1px solid rgba(0,0,0,.06);
        width: 300px;
        .select-left-search{
          height: 35px;
          border-bottom: 1px solid rgba(0,0,0,.06);
          padding: 6px 20px 6px 40px;
          position: relative;
          >i{
            position: absolute;
            font-size: 14px;
            top: 10px;
            left: 10px;
            cursor: pointer;
          }
          input{
            width: 100%;
            border: none;
            outline: none;
            height: 22px;
            line-height: 22px;
          }
        }
        .select-left-search-result{
          height:330px;
          overflow-y: auto;
          .select-left-search-result-item{
            padding-left: 10px;
            line-height:24px;
            font-size: 12px;
            color: #252629;
            cursor: pointer;
            &:hover{
              background-color: #efefef;
            }
          }
        }
        .select-left-search-page{
          line-height: 31px;
          height: 31px;
          padding-left: 100px;
          border-top: 1px solid rgba(0,0,0,.06);
          >i{
            cursor: pointer;
          }
        }
      }
      .select-middle{
        width: 25px;
        position: relative;
        height: 100%;
        padding: 150px 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        i{
          width: 16px;
          height: 16px;
          margin: auto;
          font-weight: bold;
          font-size: 18px;
        }
      }
      .select-right{
        width: 225px;
        border: 1px solid rgba(0,0,0,.06);
        background-color: #efefef;
        .select-right-section{
          .select-right-section-title{
            line-height: 22px;
            border-top: solid 1px rgba(0,0,0,.06);
            padding: 0 7px;
            font-size: 12px;
            color:#6f7072;
          }
          .select-right-section-content{
            height: 300px;
            border-top: solid 1px rgba(0,0,0,.06);
            transition:  all 0.2s;
            overflow: auto;
            .select-right-section-content-item{
              padding: 0 24px 0 12px;
              line-height: 24px;
              font-size: 12px;
              position: relative;
              i{
                display: none;
                position: absolute;
                right: 4px;
                top: 4px;
                font-size: 16px;
                cursor: pointer;
              }
              &:hover{
                i{
                  display: block;
                }
              }
            }
          }
        }
      }
    }
    .address-dialog-footer{
      padding: 20px 0 10px 315px;
      >div{
        width: 100px;
        line-height: 32px;
        display: inline-block;
        text-align: center;
        margin-right: 15px;
        border-radius: 4px;
        cursor: pointer;
      }
      >div:first-child {
        background-color: #3a81fc;
        border: 1px solid #3a81fc;
        color: #FFF;
        border-radius: 4px;
        &:hover{
        background-color: #3577e9;
        border: 1px solid #3577e9;
        }
      }
      >div:last-child{
        border: 1px solid #ccc;
        &:hover{
          background-color: rgba(0,0,0,.08);
        }
      }
    }
  }
 .email-dialog{
   .el-dialog__header{
    padding: 0;
    .el-dialog__headerbtn{
      font-size: 35px;
    }
   }
   .el-dialog__body{
     padding: 0;
   }
   .title{
     text-align: center;
     font-size: 18px;
     line-height: 42px;
     font-weight: bold;
   }
   .email-content{
     margin-top: 12px;
     padding-bottom: 50px;
     .row-1{
       padding: 5px 130px 5px 132px;
       position: relative;
       min-height: 45px;
       border-bottom:1px solid rgba(0,0,0,.06);
       .left-label{
         position: absolute;
         left: 24px;
         top: 6px;
         font-size: 14px;
         color: rgb(37, 38, 41);
         line-height: 32px;
       }
       i{
         font-size: 16px;
       }
       .iconclass{
         display:inline-block;
         width: 32px;
         height: 32px;
         text-align: center;
         cursor: pointer;
         &:hover{
           background-color: rgba(0,0,0,.08);
         }
       }
       .left-name{
         display: inline-block;
         width: 50px;
       }
       input{
         outline: none;
         border: none;
         width: 100%;
         font-size: 14px;
         font-weight: 700;
         height: 34px;
         line-height: 34px;
       }
       .people-wrapper{
         padding: 5px 0;
         .select-people-item{
           cursor: pointer;
           float:left;
           line-height: 24px;
           padding: 0 10px;
           background-color: #b8d2fe;
           border-radius: 2px;
           font-size: 12px;
           color: #252629;
           margin-right: 5px;
           margin-bottom: 5px;
           i{
             font-size: 12px;
             cursor: pointer;
             &:hover{
               background-color: #7aadfd;
             }
           }
         }
         .people-suggest{
           width: auto;
           line-height: 24px;
           height: 24px;
           font-weight: normal;
           margin-left: 10px;
         }
         .people-suggest-input{
           display: inline-block;
           position:relative;
         }
         .input-suggest{
           position: absolute;
           width:500px;
           height: 200px;
           bottom: -200px;
           left: 0;
           box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
           border: 1px solid #e4e7ed;
           background-color: #fff;
           z-index: 99;
           overflow: auto;
           cursor: initial;
           .suggest-item{
            padding: 0 20px;
            margin: 0;
            line-height: 34px;
            cursor: pointer;
            color: #606266;
            font-size: 14px;
            list-style: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &:hover{
              background-color: #f5f7fa
            }
           }
         }
       }
       .files-wrapper{
         .file{
           float:left;
           display: flex;
           width: 268px;
           height: 56px;
           background: #efefef;
           border-radius: 2px;
           margin-right: 16px;
           margin-bottom: 5px;
           cursor: pointer;
           &:hover{
             .file-info .file-action{
               visibility: visible;
             }
           }
          .file-type{
            width: 56px;
            text-align: center;
            line-height: 56px;
            img{
              width: 32px;
              height: 32px;
              text-align: center;
            }
          }
          .file-info{
            position: relative;
            width: calc(100% - 56px);
            p{
              margin: 0;
              font-size: 12px;
              line-height: 16px;
            }
            >p:first-child{
              margin-top: 12px;
              color:black;
            }
            >p:last-child{
              color: #6f7072;
            }
            .file-action{
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              visibility: hidden;
              background-color: #efefef;
              opacity: .9;
              filter: alpha(opacity=90);
              padding: 11px;
              text-align: right;
              line-height: 34px;
              i{
                font-size: 20px;
                margin-right: 5px;
                padding: 5px;
                cursor: pointer;
                &:hover{
                  background-color: rgba(0,0,0,.08);
                  color: #444547;
                }
              }
            }
          }
         }
       }
     }
     .editor-tool-bar{
      padding: 10px 15px;
      border-bottom:1px solid rgba(0,0,0,.06);
     }
     .email-editor{
       padding: 15px 15px;
       .w-e-text{
         min-height: 300px;
       }
       .w-e-text table{
         border: none;
       }
       .w-e-text table td, .w-e-text table th{
         border: none;
       }
     }
     .footer-bar{
       position: fixed;
       bottom: 0;
       left:0;
       width: 100%;
       padding: 12px 24px 16px 24px;
       z-index: 2;
       background-color: #FFF;
       >div{
         width: 100px;
         line-height: 32px;
         display: inline-block;
         text-align: center;
         margin-right: 15px;
         border-radius: 4px;
         cursor: pointer;
       }
       .send-btn {
         background-color: #3a81fc;
         border: 1px solid #3a81fc;
         color: #FFF;
         border-radius: 4px;
         &:hover{
          background-color: #3577e9;
          border: 1px solid #3577e9;
         }
       }
       .sendcgx-btn {
         border: 1px solid #ccc;
         &:hover{
           background-color: rgba(0,0,0,.08);
         }
       }
     }
   }
 }
</style>